<script setup lang="ts">
import BaseWindow from "../../base-window/index.vue";
import status0 from "../../../assets/images/status-0.png";
import status1 from "../../../assets/images/status-1.png";
import status2 from "../../../assets/images/status-2.png";
import { useMessage } from "naive-ui";
import { ref } from "vue";
const message = useMessage();
const buttons = ref({
  single: [
    {
      name: "下层补光",
      status: 0,
    },
    {
      name: "内风机",
      status: 1,
    },
    {
      name: "温度设置",
      status: 0,
    },
    {
      name: "温控开关",
      status: 0,
    },
    {
      name: "水路灌溉",
      status: 0,
    },
    {
      name: "外风机",
      status: 0,
    },
  ],
  multi: [
    {
      name: "卷帘",
      buttons: [
        {
          value: "开",
          status: 0,
        },
        {
          value: "停",
          status: 2,
        },
      ],
    },
  ],
});
const toggleSingle = (index: number) => {
  console.log(buttons.value.single[index]);
  if (buttons.value.single[index].status == 0) {
    buttons.value.single[index].status = 1;
    message.info("打开成功");
  } else {
    buttons.value.single[index].status = 0;
    message.info("关闭成功");
  }
};
const toggleMulti = (index: number, index2: number) => {
  if (buttons.value.multi[index].buttons[index2].status == 0) {
    buttons.value.multi[index].buttons[index2].status = 2;
    message.info("打开成功");
  } else {
    buttons.value.multi[index].buttons[index2].status = 0;
    message.info("关闭成功");
  }
};
</script>

<template>
  <div class="menu-wrapper">
    <div class="single-list">
      <div class="single-item" v-for="(item, index) in buttons.single">
        <img
          @click="toggleSingle(index)"
          :src="
            item.status == 0 ? status0 : item.status == 1 ? status1 : status2
          "
          alt=" "
        />
        <span class="button-label">{{ item.name }}</span>
        <span :class="`button-value status status-${item.status}`">{{
          item.status == 0 ? "开" : "关"
        }}</span>
      </div>
    </div>
    <div class="multi-list">
      <div class="multi-wrapper" v-for="(item, index) in buttons.multi">
        <div class="multi-list menu-border">
          <div class="multi-item" v-for="(button, buttonIndex) in item.buttons">
            <img
              @click="toggleMulti(index, buttonIndex)"
              :src="
                button.status == 0
                  ? status0
                  : button.status == 1
                  ? status1
                  : status2
              "
              alt=" "
            />
          </div>
        </div>
        <span class="button-label">{{ item.name }}</span>
        <div class="multi-list">
          <div class="multi-item" v-for="button in item.buttons">
            <span :class="`button-value status status-${button.status}`">{{
              button.status == 0 ? "开" : button.status == 1 ? "关" : "停"
            }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.menu-wrapper {
  background-color: rgba(0, 0, 0, 0.4);
  padding: 15px;
  display: flex;
  justify-content: space-between;
  .single-list {
    display: flex;
    align-items: center;
    .single-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin: 15px;
      .button-label {
        margin: 20px 0;
      }
    }
  }
  .multi-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .multi-list {
      display: flex;

      border-radius: 10px;
      .multi-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 5px;
      }
    }
    .menu-border {
      border: 2px solid #158b80;

      margin: 15px;
      margin-bottom: 0px;
    }
    .button-label {
      margin: 10px 0;
    }
  }
  .status {
    padding: 3px 11px;
    border-radius: 14px;
    font-size: 18px;
    color: #fff;
  }
  .status-0 {
    background-color: #20ca93;
  }
  .status-1 {
    background-color: #ff202f;
  }
  .status-2 {
    background-color: #eabd00;
  }
}
</style>
